const Counter=Vue.defineComponent({
	props:{
		value:Number,
		min:Number,
		max:Number
	},
	
	data(){
		return{
			count:this.value||0
		}
	},
	watch:{
		count(){
			this.$emit('update:value',this.count)
		}
	},
	methods:{
		add(){
			if( typeof this.max == 'number'){
				if(this.count < this.max)this.count++
			}else{
				this.count++
			}
		},
		sub(){
			console.log(this.min)
			if( typeof this.min == 'number'){
				if(this.count > this.min)this.count--
				}else{
					this.count--
				}
			}
			
		}
	},
	template:`
	<div class="counter-container">
	    <button @click="count--" id="decrement-btn">-</button>
	    <span id="counter-value">{{count}}</span>
	    <button @click="count++" id="increment-btn">+</button>
	</div>
	`

	
})